<template>
  <a-badge :dot="num > 0">
    <img :src="icon || src" :title="title || '消息中心'" class="head-msg" @click="click" />
  </a-badge>
</template>

<script>
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { dialog } from '@gis/lib/components/antd-dialog/index.js';
import { msgList } from '@gis/lib/api/index.js';

export default {
  name: 'head-msg',
  mixins: [areaCodeMixin],
  emits: ['click'],
  props: {
    icon: undefined,
    title: undefined,
  },
  data() {
    return {
      src: '',
      num: 0,
    };
  },
  async created() {
    const { default: src } = await import('./assets/nav_bt_remind.png');
    this.src = src;
    this.$vbus.$on('updateHeadMsgNum', (num) => {
      this.num += Number(num) || 0;
    });
  },
  unmounted() {
    this.$vbus.$off('updateHeadMsgNum');
  },
  methods: {
    getDataAsync() {
      this.getUnreadDataAsync();
    },
    async getUnreadDataAsync() {
      const params = Object.assign({}, this.apiParams, { status: 0 });
      const data = await handleCommonRes(msgList, params);
      this.num = data.count || 0;
    },
    click() {
      dialog({
        content: () => import('./components/msg-table-wrap.vue'),
        contentProps: {},
        dialogProps: {
          title: '消息列表',
          width: 'large',
          height: 'fixed',
          footer: null,
          bodyStyle: { padding: 0 },
        },
      });
    },
  },
};
</script>

<style lang="less">
.msg-dialog {
  position: absolute !important;
  top: 105px;
  right: 44px;
  padding: 0;
}
.ant-badge-count {
  transform: none;
  transform-origin: inherit;
}
.head-msg {
  width: 65px;
  height: auto;
  cursor: pointer;
}
</style>
